<template>
	<div id="basicInformation">
		<riskBtnListPage
			:parentData="parentData"
			:userInfo="userInfo"
			:userRiskControlNote="userRiskControlNote"
			:showRiskControlNote="showRiskControlNote"
			:btnPower="btnPower"
			@parentRefresh="refresh"
		></riskBtnListPage>
		<el-descriptions
			:title="`${$t('member.summary_info')}`"
			:column="2"
			style="padding-top: 10px;"
		>
			<el-descriptions-item :label="`${$t('common.risk_control_level')}`">
				{{ userInfo.windControlName || '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.label_name')}`">
				<span v-if="btnPower.includes(6)" style="color:#E6A23C">
					{{ $t('member.under_review') }}
				</span>
				<span v-else>{{ userInfo.labelName || '-' }}</span>
			</el-descriptions-item>

			<el-descriptions-item :label="`${$t('member.rebate_status')}`">
				<el-tag
					v-if="userInfo.rebateFreezeStatus === 1"
					size="mini"
					type="danger"
					style="margin-right:10px"
				>
					{{ $t('common.account_status_suspend') }}
				</el-tag>
				<span v-else>
					<el-tag
						v-if="userInfo.rebateFreezeStatus === 0"
						size="mini"
						type="success"
					>
						{{ $t('common.account_status_normal') }}
					</el-tag>
				</span>
			</el-descriptions-item>
			<el-descriptions-item :label="`风控状态`">
				{{
					netAssetsWindStatusMap[userInfo.netAssetsWindStatus] || '-'
				}}
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.risk_remark')}`">
				<el-tooltip
					effect="dark"
					:content="showRiskControlNote"
					placement="top"
				>
					<span v-if="showRiskControlNote !== '-'">
						<div class="overflow-tooltip">
							<Copy :title="showRiskControlNote" :copy="copy">
								{{ showRiskControlNote }}
							</Copy>
						</div>
					</span>
					<span v-else>
						-
					</span>
				</el-tooltip>
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('member.phone_number')}`">
				<el-tooltip
					effect="dark"
					:content="riskInfoMobile"
					placement="top"
				>
					<span v-if="riskInfoMobile">
						<Copy :title="riskInfoMobile" :copy="copy">
							{{ riskInfoMobile }}
						</Copy>
					</span>
					<span v-else>
						-
					</span>
				</el-tooltip>
			</el-descriptions-item>
			<el-descriptions-item :label="`${$t('risk.virtual_address')}`">
				<el-tooltip
					effect="dark"
					:content="riskInfovirAddr"
					placement="top"
				>
					<p v-if="riskInfovirAddr.length">
						<span v-for="item in riskInfovirAddr" :key="item">
							<Copy :title="item" :copy="copy">
								{{ item }}
							</Copy>
						</span>
					</p>
					<p v-else>
						-
					</p>
				</el-tooltip>
			</el-descriptions-item>
		</el-descriptions>

		<el-divider></el-divider>
		<el-descriptions
			:title="`${$t('member.remarks')}`"
			:column="1"
			:colon="false"
			class="mb100"
		>
			<el-descriptions-item content-class-name="my-content">
				<el-table
					v-loading="remarkLoading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="userRiskControlNote"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						align="center"
						type="index"
						:label="`${$t('common.serial_number')}`"
						:width="getWidth('100px')"
					>
						<template slot-scope="scope">
							<span>{{ getIndex(scope.$index) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updateAt"
						align="center"
						:label="`${$t('member.update_time')}`"
					></el-table-column>
					<el-table-column
						prop="note"
						align="center"
						:label="`${$t('member.remarks')}`"
						show-overflow-tooltip
					></el-table-column>
					<el-table-column
						prop="updateBy"
						align="center"
						:label="`${$t('member.remarks_account_no')}`"
					></el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="page"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="size"
					:page-sizes="$store.getters.pageSizes"
					:total="total"
					:pager-count="9"
					style="float: right; padding-top: 10px"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import riskBtnListPage from './risk-btn-list-page'
export default {
	components: { riskBtnListPage },
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) },
		userInfo: { type: Object, default: {} },
		btnPower: { type: Array, default: [] }
	},
	data() {
		return {
			remarkLoading: false,
			memberRemarkList: [],
			userRiskControlNote: [],
			page: 1,
			size: 100,
			pageSizes: 0,
			showRiskControlNote: '-',
			riskInfoMobile: '',
			riskInfovirAddr: []
		}
	},
	computed: {
		netAssetsWindStatusMap() {
			return {
				0: '正常',
				1: '净资产锁定',
				2: '净资产告警'
			}
		}
	},
	watch: {},
	created() {
		this.queryRiskNoteFunc()
		this.queryRiskControlFullDetailInfoFunc()
	},
	methods: {
		queryRiskControlFullDetailInfoFunc() {
			this.remarkLoading = true
			this.$api
				.getRiskControlFullDetailInfo({
					merchantId: this.userInfo.merchantId,
					userId: this.userInfo.id
				})
				.then((res) => {
					this.riskInfoMobile = res?.data.mobile
					this.riskInfovirAddr = res?.data.virAddr || []
				})
				.catch(() => {
					this.remarkLoading = false
				})
		},

		queryRiskNoteFunc() {
			this.remarkLoading = true
			this.$api
				.getRiskControlNote({
					pageNum: this.page,
					pageSize: this.size,
					userId: this.userInfo.id
				})
				.then((res) => {
					this.userRiskControlNote = res?.data.record
					this.total = res?.data.totalRecord
					this.pageSizes = res?.data.totalPage
					this.remarkLoading = false
					if (this.page === 1) {
						this.showRiskControlNote = this.userRiskControlNote[0]
							? this.userRiskControlNote[0].note
							: '-'
					}
				})
				.catch(() => {
					this.remarkLoading = false
				})
		},
		getNewUserInfo() {
			this.$api
				.getOutlineInfo({ ...this.parentData })
				.then((res) => {
					this.$emit('setNewUserInfo', res?.data)
				})
				.catch(() => {})
		},
		refresh() {
			this.page = 1
			this.getNewUserInfo()
			this.queryRiskNoteFunc()
		},
		handelDayNum(val) {
			if (val) {
				const lastTime = dayjs(val)
				const nowTime = new Date()
				const day = dayjs(nowTime).diff(lastTime, 'day')
				return day
			} else {
				return '-'
			}
		},
		handleCurrentChange(val) {
			this.page = val
			this.queryRiskNoteFunc()
		},
		handleSizeChange(val) {
			this.page = 1
			this.size = val
			this.queryRiskNoteFunc()
		},
		getIndex(index) {
			return (this.page - 1) * this.size + index + 1
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
	min-width: 48px;
}

::v-deep .my-content {
	width: 100%;
	margin-left: -60px;
	.progress-bar {
		display: flex;
		> li {
			flex: 0.8;
			line-height: 22px;
			margin-right: 40px;
			box-sizing: border-box;
			:nth-child(1),
			:nth-child(3) {
				text-align: right;
			}
			:last-child {
				text-align: center;
			}
		}
		.first-li {
			flex: 0.2;
			margin-right: 0;
			:nth-child(1),
			:nth-child(3) {
				text-align: left;
			}
			:nth-child(2) {
				line-height: 12px;
			}
		}
	}
}
.overflow-tooltip {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	max-width: 300px;
}

.personal-apply-color {
	color: #e6a23c;
}
.personal-show-info {
	margin-left: -15px;
}

.vip-box {
	padding: 20px 40px;
	line-height: 32px;
	border-left: 1px solid #ccc;
}
.show-avatar-content {
	margin-left: -60px;
}
::v-deep .show-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}
</style>
